<template>
  <div class="list-page">
    <div class="project-b">
      <projectB-card></projectB-card>
      <approval-card></approval-card>
    </div>

    <div class="project-a">
      <projectA-card></projectA-card>
    </div>

  <div class="project-b">
    <warning-card></warning-card>
    <notice-card></notice-card>
    <map-card></map-card>
  </div>
  </div>
</template>

<script lang="ts" setup>
import approvalCard from "./components/approvalCard.vue";
import projectBCard from "./components/projectBCard.vue";
import projectACard from "./components/projectACard.vue";
import warningCard from "./components/warningCard.vue";
import noticeCard from "./components/noticeCard.vue";
import mapCard from "./components/mapCard.vue";
</script>

<style lang="scss" scoped>
.list-page{
  background: #F5F6FA;
  padding:12px;
  overflow: auto;
  .project-b{
    display: flex;
    justify-content: space-between;
  }
  .project-a{
    margin:16px 0

  }
}
</style>
